import React, { useEffect, useLayoutEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log("父+useEffect+count", count);
    return () => {
      console.log("父+useEffect返回", count);
    };
  });
  useLayoutEffect(() => {
    console.log("父+useLayoutEffect+count", count);
  });
  console.log("父执行");
  return (
    <div>
      <button
        onClick={() => {
          setCount((c) => c + 1);
        }}
      >
        {count}点击
      </button>
      <Count i={count}></Count>
      <Other></Other>
    </div>
  );
}
function Count({ i }) {
  useEffect(() => {
    console.log("子+useEffect+i", i);
    return () => {
      console.log("子+useEffect返回", i);
    };
  });
  useLayoutEffect(() => {
    console.log("子+useLayoutEffect+i", i);
  });
  console.log("子执行");

  return <div>{i}</div>;
}
export default App;
function Other() {
  useEffect(() => {
    console.log("other+useEffect");
  });
  useLayoutEffect(() => {
    console.log("other+useLayoutEffect");
  });
  console.log("oTher子执行");

  return <div>other</div>;
}
